<template>
	<div>
		<div class="container center banner">
			<img src="../../static/img/banner.png" alt="" class="img-responsive pc-bg">
			<img src="../../static/img/m-banner.png" alt="" class="img-responsive m-bg">
		</div>
		<div class="container center item-nav">
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
				<div class="pc-item-nav">
					<div class="pc-item-nav-tit">
						<label>新生入学</label>
						<span>/</span>
						<span>enrollment</span>
					</div>
					<ul class="list-unstyled pc-item-nav-content">
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/question_answer"><span>新生答疑</span></router-link></li>
						<li><i class="iconfont icon-arrows-8-2"></i><router-link to="/admission_query"><span>录取查询</span></router-link></li>
						<li class="active"><i class="iconfont icon-arrows-8-2"></i><router-link to="/admission_information"><span>入学须知</span></router-link></li>
					</ul>
					<div>
						<router-link to="special_major_accouting">
							<img src="../../static/img/pro_info.png" class="img-responsive" alt="专业介绍">
						</router-link>
					</div>
					<div>
						<router-link to="sign_online">
							<img src="../../static/img/sign.png" class="img-responsive" alt="在线报名">
						</router-link>
					</div>
					
				</div>
				<!-- mobail -->
				<div class="m-item-nav">
					<div class="active">
						<router-link to='/employment_newsletter'><span class="text-center">就业时讯</span></router-link>
					</div>
					<div>
						<router-link to='/related_downloads'><span class="text-center">相关下载</span></router-link>
					</div>
					<div>
						<router-link to="/co_enterprise"><span class="text-center">合作企业</span></router-link>
					</div>
				</div>
			</div>
			<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 content">
				<div class="content-title">
					<div class="content-left">
						<span class="h3">入学须知</span>
					</div>
					<div class="content-right">
						<i class="iconfont icon-bofang"></i>
						<span><router-link to='/'>首页</router-link></span>
						<span>></span>
						<span><router-link to='/question_answer'>新生入学</router-link></span>
						<span>></span>
						<span><router-link to='/admission_information'>入学须知</router-link></span>
					</div>
				</div>
				<div class="news-list">
					<ul class="list-unstyled">
						<span id="none">资料正在整理中..</span>
						<li v-for="item in nowList">
							<router-link :to="{name: 'news_page7', params: { id: item.id }}">
								<i class="iconfont icon-iconfontbbgxiayiji"></i>
								<span class="h5">{{item.title}}</span>
								<span class="h6">{{item.add_time}}</span>
							</router-link>	
						</li>
					</ul>
				</div>
				<!--navigation-->
				<nav aria-label="Page navigation" class="page pc-bg" id="page">
				  <ul class="pagination">
				    <li @click="jump(curPage==1?1:curPage-1)">
				      <a href="#" aria-label="Previous">
				        <span aria-hidden="true">&laquo;</span>
				      </a>
				    </li>
				    <li v-for="item in totalPageList" @click="jump(item)" :class="{active:curPage==item}"><a href="#">{{item}}</a></li>
				    <li @click="jump(curPage==totalPage?totalPage:curPage+1)">
				      <a href="#" aria-label="Next">
				        <span aria-hidden="true">&raquo;</span>
				      </a>
				    </li>
				  </ul>
				</nav>
				<nav class="m-page m-bg" aria-label="..." id="page1">
				  <ul class="pager">
				    <li @click="jump(curPage==1?1:curPage-1)"><a href="#">&laquo;上一页</a></li>
				    <li @click="jump(curPage==totalPage?totalPage:curPage+1)"><a href="#">下一页&raquo;</a></li>
				  </ul>
				</nav>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				newsLiat:[],
				curPage:1,
				total:'',
				show:10,
				nowList:[],
				totalPage:'',
				totalPageList:[],
			}
		},
		created:function(){
			document.title = "入学须知_扬州中瑞酒店职业学院互联网学院招生网";
			var _self = this;
	    	var url="http://hh.c1903.com/index/api/article"; 
	    	
			this.$http.post(url,{token:'xueyuanyi',code:'1a11c6a0e49a916429c1719fa8d587e2',type:"12"}).then((res)=>{
				_self.newsLiat = res.data;
				console.log(_self.newsLiat);
				if(_self.newsLiat.length == 0){
					var none = document.getElementById('none');
					none.style.display = 'block';
					document.getElementById('page').style.display = "none";
				}
				
				this.$nextTick(() => {
					if(_self.newsLiat.length == 0)
						return false;
					if(this.totalPage <= 1){
						document.getElementById('page').style.display = "none";
						document.getElementById('page1').style.display = "none";
					}	
					this.total = _self.newsLiat.length;
					//生成多少页
					this.totalPage = this.total/this.show;
					for(var i = 0;i<this.totalPage;i++){
						this.totalPageList.push(i+1);
					}
					
					//每一页装多少条
					for(var i =0;i<this.show;i++){
						this.nowList.push(_self.newsLiat[i]);
					}
				})
				
		　　}).catch((err)=>{
		　　　　console.log(err);
		　　});
		},
		methods:{
			jump(page){
				this.curPage = page;
				this.nowList = [];
				var star = (page-1)*this.show;
				var end = (page-1)*this.show+this.show;
				if(end > this.total)
					end = this.total;
				for (var i = star;i<end;i++) {
					this.nowList.push(this.newsLiat[i]);
				}
			}
	    }
	}
</script>

<style>
</style>